<template>
  <div class="spotCheck">
    <el-card>
      <div class="spotCheck-header">
        <div class="spotCheck-header-title" style="width: 280px">
          社会组织风险处置
        </div>
        <div class="spotCheck-header-tabs">
          <div
            :class="
              defaultActive === it.name
                ? 'spotCheck-header-tabs-items spotCheck-header-tabs-items-ac'
                : 'spotCheck-header-tabs-items'
            "
            v-for="it in page"
            :key="it"
            @click="select(it.name)"
          >
            {{ it.name }}
          </div>
        </div>
      </div>
      <div class="content">
        <MForm
          :fields="fields"
          @submit="search"
          @cancel="search"
          class="search"
        >
          <!--<template #extra>-->
          <!--  <el-button type="primary" @click="exportHtmlToWord">导出</el-button>-->
          <!--</template>-->
        </MForm>
        <div class="btns">
          <el-button
            type="primary"
            @click="add"
            v-if="$checkAuth('taskManagementAdd')"
            >新增</el-button
          >
          <div
            style="margin: 0 10px"
            v-if="$checkAuth('taskManagementMoreDel')"
          >
            <MDeleteButton
              @click="setInstitutionDel(selectKeys)"
              :selectKeys="selectKeys"
            ></MDeleteButton>
          </div>
          <el-button
            type="primary"
            @click="openTimeOutRef"
            v-if="$checkAuth('taskManagementTimeOut')"
            >超时配置</el-button
          >
        </div>
        <MTable
          :columns="columns"
          :http="tableHttp"
          :params="params"
          v-model:isReload="isReload"
          v-model:selectKeys="selectKeys"
          displayFormat="list"
          rowKey="sorgRiskHandleId"
        >
          <template #风险级别="{ row }">
            <img
              src="@/assets/imgs/spotCheck/y1.png"
              class="grade"
              v-if="row.riskLevel === '一级'"
            />
            <img
              src="@/assets/imgs/spotCheck/y2.png"
              class="grade"
              v-if="row.riskLevel === '二级'"
            />
            <img
              src="@/assets/imgs/spotCheck/y3.png"
              class="grade"
              v-if="row.riskLevel === '三级'"
            />
          </template>
          <template #状态="{ row }">
            <div class="tag-status" v-if="row.flowStatus === 0">
              <span class="error">待接收</span>
            </div>
            <div class="tag-status" v-if="row.flowStatus === 2">
              <span class="pri">审核中</span>
            </div>
            <div class="tag-status" v-if="row.flowStatus === 1">
              <span class="warning">整改中</span>
            </div>
            <div class="tag-status" v-if="row.flowStatus === 3">
              <span class="success">整改完成</span>
            </div>
          </template>
          <template #timeout="{ row }">
            <div :class="{ timeout: row.timeout === '已超时' }">
              {{ row.timeout }}
            </div>
            <div></div>
          </template>
          <template #actions="{ row }">
            <MSvgIconTooltip
              name="view"
              content="查看"
              @click="toDetail(row.sorgRiskHandleId)"
              v-if="$checkAuth('taskManagementView')"
            ></MSvgIconTooltip>
            <MSvgIconTooltip
              name="edit"
              content="编辑"
              @click="add(row.sorgRiskHandleId)"
              v-if="$checkAuth('taskManagementEdit')"
            ></MSvgIconTooltip>
            <MSvgIconTooltip
              name="del"
              content="删除"
              @click="setInstitutionDel([row.sorgRiskHandleId])"
              v-if="$checkAuth('taskManagementDel')"
            ></MSvgIconTooltip>
            <MSvgIconTooltip
              name="restructuring"
              content="整改"
              :disabled="![1].includes(row.flowStatus)"
              @click="
                ![1].includes(row.flowStatus)
                  ? ''
                  : toRestructuring(row.sorgRiskHandleId, 1)
              "
              v-if="$checkAuth('taskManagementRectification')"
            ></MSvgIconTooltip>
            <MSvgIconTooltip
              name="audit"
              content="审核"
              @click="toRestructuring(row.sorgRiskHandleId, 2)"
              v-if="$checkAuth('taskManagementAudit')"
            ></MSvgIconTooltip>
          </template>
        </MTable>
      </div>
    </el-card>
  </div>
  <AddForm ref="AddFormRef" @reload="reload" />
  <TimeOut ref="TimeOutRef" @reload="reload" />
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { columns, fields, dialogFields } from './config'
import { logExport, logList } from '@/api/system/logManagement'
import AddForm from './components/addForm/addForm.vue'
import {
  handlerDel,
  handlerMytask,
  handlerPage,
  handlerTakePart,
  soptCheckDel
} from '@/api/spotCheck/spotCheck'
import TimeOut from './timeOut/timeOut.vue'

import { ElMessage } from 'element-plus'
const router = useRouter()
const route = useRoute()

defineOptions({
  name: 'taskManagement'
})

const TimeOutRef = ref()
const openTimeOutRef = () => {
  TimeOutRef.value.show()
}

const menuStatus = ref(false)
const page = [
  {
    name: '全部任务',
    table: handlerPage
  },
  {
    name: '我整改的任务',
    table: handlerMytask
  },
  {
    name: '我审核的任务',
    table: handlerTakePart
  }
]

const defaultActive = ref('全部任务')

const select = (e) => {
  defaultActive.value = e
  reload()
}

const tableHttp = computed(() => {
  return page.find((i) => i.name === defaultActive.value).table
})
// 搜索
const params = ref<any>({})
const search = (data: any) => {
  let d = {
    ...data
  }
  if (d?.time) {
    d.startTime = d.time[0]
    d.endTime = d.time[1]
    delete d.time
  } else {
    d.startTime = undefined
    d.endTime = undefined
  }
  params.value = {
    ...params.value,
    ...d
  }
}

// 删除
const selectKeys = ref<number[]>([])
const clearSelectKeysReload = () => {
  selectKeys.value = []
  reload()
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
}

//新增
const AddFormRef = ref()
const add = (id = 0) => {
  AddFormRef.value.show(id)
}

const toDetail = (id) => {
  router.push({
    name: 'TaskManagementView',
    query: {
      id
    }
  })
}

const toRestructuring = (id, type) => {
  router.push({
    name: 'Restructuring',
    query: {
      id,
      type
    }
  })
}

//批量删除
const setInstitutionDel = (e) => {
  handlerDel({ sorgRiskHandleId: e }).then((res) => {
    ElMessage.success('删除成功！')
    reload()
  })
}
</script>
<style lang="scss" scoped>
.spotCheck-content {
  width: 100%;
  min-height: 500px;
  &-search {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 30px;
  }
}
.spotCheck-header-tabs {
  height: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e9e9e9;
  &-items {
    height: 100%;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 24px 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
    cursor: pointer;
    border-right: 1px solid #e9e9e9;
  }
  &-items:last-child {
    border-right: unset;
  }
  &-items:hover {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 18px;
    color: #1c85ff;
    position: relative;
  }
  &-items:hover::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #1c85ff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
  }
  &-items-ac {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 18px;
    color: #1c85ff;
    font-weight: 500;
    position: relative;
  }
  &-items-ac::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #1c85ff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.spotCheck-content-tabs {
  width: 100%;
  height: 70px;
  display: flex;
  border: 1px solid #e9e9e9;
  position: relative;
  &-content {
    flex: 1;
    height: 100%;
    box-sizing: border-box;

    display: flex;
    justify-content: space-around;
    align-items: center;
    &-title {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
      margin-top: 15px;
      cursor: pointer;
    }
    &-ac {
      font-weight: 500;
      font-size: 18px;
      color: #333333;
      position: relative;
    }
    &-ac::after {
      content: '';
      height: 4px;
      width: 60%;
      position: absolute;
      bottom: -17px;
      right: 0;
      left: 0;
      margin: auto;
      background: #1c85ff;
      border-radius: 0px 0px 0px 0px;
    }
  }
  &-rig {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 26px;
      height: 26px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
.content {
  padding: 20px;
}
.grade {
  width: 27px;
  height: 27px;
}
.btns {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  flex-direction: row;
}
.timeout {
  color: #e4393c;
}
</style>
